<template>
    <div style="background-color: rgba(239, 250, 251, 1); overflow-x: hidden" :style="{height: cardHeight + 'px'}">
        <template v-if="showFirst">
            <div class="searchIpt">
                <a-row>
                    <a-col span="24">
                        <div class="sit">外部专家检索</div>
                    </a-col>
                </a-row>
                <div style="position: absolute; right: 0; top: 30%; width: 30px; cursor: pointer;" @click="toChat">
                    <div style="background-color: #19927F; color: #fff; font-size: 20px; padding: 5px;"><a-icon type="message"></a-icon>专家信息AI检索</div>
<!--                    <a-button type="primary" icon="message" @click="toChat">专家信息AI检索</a-button>-->
                </div>
                <br/>
                <a-row>
                    <a-col span="24">
<!--                        <a-input-search placeholder=""-->
<!--                                        size="large"-->
<!--                                        @search="search">-->
<!--                        </a-input-search>-->
                        <a-input-search placeholder="" @search="mainSearch">
                            <a-select slot="addonBefore" :default-value="1" style="width: 120px; font-size: 18px; border-radius: 0 0 50px 50px; padding-left: 5px;" @change="handleChange">
                                <a-select-option :value="1">
                                    姓名
                                </a-select-option>
                                <a-select-option :value="2">
                                    单位
                                </a-select-option>
                                <a-select-option :value="3">
                                    关键词
                                </a-select-option>
                            </a-select>
                        </a-input-search>
                    </a-col>
                </a-row>
            </div>
            <div style="width: 80%; margin: 10px auto; text-align: center">
                <a-row>
                    <a-col span="24">
                        <template v-for="item in randomTags">
                            <a-tag color="#79abb1" style="font-size: 18px;line-height: 25px; cursor: pointer"
                                   @click="tagSearch(item.name, 3)">
                                {{ item.name }}
                            </a-tag>
                        </template>
                    </a-col>
                </a-row>
            </div>
            <div style="width: 80%; margin: 5px auto; text-align: right;">
                <a-button style="background-color: #038181; color: #fff;" @click="toShowTop()">
                    <a-icon type="eye" theme="filled"/>
                    {{ showTop ? '查看推荐' : '合作排行榜' }}
                </a-button>
            </div>
            <div style="width: 80%; margin: 20px auto;" v-if="!showTop">
                <a-row :gutter="24">
                    <a-col span="12">
                        <a-card class="cardcommon first" size="small">
                            <a-row>
                                <a-col span="2" class="dott_f" style="color: rgba(0, 128, 128, 1);">•</a-col>
                                <a-col span="18" class="centt">
                                    <span class="leftTit" style="color: rgba(0, 128, 128, 1);">综合热点成果 </span>
                                    <span class="centerTit">当前的热点成果</span>
                                </a-col>
                                <!--                                <a-col span="4" class="rightTit" @click="randomFruit(1)"><a-icon type="sync" style="color: #008080"/></a-col>-->
                            </a-row>
                            <a-spin tip="数据加载中..." v-if="!isHaveFirstData">
                                <div class="spin-content_fir">
                                </div>
                            </a-spin>
                            <template v-if="isHaveFirstData">
                                <div v-for="item in hotResultData">
                                    <div class="contc_firt cont_comm">
                                        <a-row>
                                            <a-col span="18" class="dottc"
                                                   @click="showFruitInfo(item)">
                                                {{ item.fruitName }}
                                            </a-col>
                                            <a-col span="6">
                                                <span class="autn"
                                                      style="color: rgba(0, 128, 128, 1);">{{
                                                        item.fruitPubTime.substring(0, 10)
                                                    }} </span>
                                            </a-col>
                                        </a-row>
                                    </div>
                                </div>
                            </template>
                        </a-card>
                    </a-col>
                    <a-col span="12">
                        <a-card class="cardcommon two" size="small">
                            <a-row>
                                <a-col span="2" class="dott_s">•</a-col>
                                <a-col span="18" class="centt">
                                    <span class="leftTit">领域成果推荐 </span>
                                    <span class="centerTit">当前研究领域关联的成果</span>
                                </a-col>
                            </a-row>
                            <a-spin tip="数据加载中..." v-if="!isHaveTwoData">
                                <div class="spin-content_sec">
                                </div>
                            </a-spin>
                            <template v-if="isHaveTwoData">
                                <div v-for="item in hyResultData">
                                    <div class="contc_sec cont_comm">
                                        <a-row>
                                            <a-col span="18" class="dottc"
                                                   @click="showFruitInfo(item)">
                                                {{ item.fruitName }}
                                            </a-col>
                                            <a-col span="6" class="centt">
                                                <span class="autn"
                                                      style="color: rgba(251, 127, 93, 1);">{{
                                                        item.fruitPubTime.substring(0, 10)
                                                    }} </span>
                                            </a-col>
                                        </a-row>
                                    </div>
                                </div>
                            </template>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
            <div style="width: 80%; margin: 20px auto;" v-if="showTop">
                <a-row :gutter="24">
                    <a-col span="12">
                        <a-card class="cardcommon first" size="small">
                            <a-row>
                                <a-col span="2" class="dott_f" style="color: rgba(0, 128, 128, 1);">•</a-col>
                                <a-col span="18" class="centt">
                                    <span class="leftTit" style="color: rgba(0, 128, 128, 1);">合作次数 </span>
                                </a-col>
                            </a-row>
                            <a-row style="margin: 10px;">
                                <a-col span="18" class="leftTit" style="color: rgba(0, 128, 128, 1);">
                                    <a-radio-group name="radioGroup" v-model="firRadioValue" @change="onFirChange">
                                        <a-radio :value="1">
                                            论文
                                        </a-radio>
                                        <a-radio :value="2">
                                            专利
                                        </a-radio>
<!--                                        <a-radio :value="3">-->
<!--                                            领域-->
<!--                                        </a-radio>-->
                                    </a-radio-group>
                                    <a-select style="width: 200px" @change="changeCooNumFiled"
                                              v-if="firRadioValue == 3">
                                        <a-select-option v-for="item in fieldsArr" :value="item.name">
                                            {{ item.name }}
                                        </a-select-option>
                                    </a-select>
                                </a-col>
                                <a-col span="6" class="leftTit" style="color: rgba(0, 128, 128, 1);">
                                    top:
                                    <a-select default-value="20" @change="changeFirPageSize" style="width: 60px;">
                                        <a-select-option value="20">
                                            20
                                        </a-select-option>
                                        <a-select-option value="50">
                                            50
                                        </a-select-option>
                                    </a-select>
                                </a-col>
                            </a-row>
                            <a-spin tip="数据加载中..." v-if="!showTopFirstLoading">
                                <div class="spin-content_fir">
                                </div>
                            </a-spin>
                            <template v-if="showTopFirstLoading">
                                <a-row class="colHead">
                                    <a-col span="4">
                                        序号
                                    </a-col>
                                    <a-col span="16">
                                        作者姓名
                                    </a-col>
                                    <a-col span="4">
                                        合作次数
                                    </a-col>
                                </a-row>
                                <div style="height: 520px; overflow: auto;">
                                    <a-row v-for="(item, index) in topFirData" :key="index" class="colCont">
                                        <a-col span="4">
                                            <div>{{ index + 1 }}</div>
                                        </a-col>
                                        <a-col span="16">
                                            {{ item.talentRealName }}
                                        </a-col>
                                        <a-col span="4">
                                            {{ searchFirTopObj.fruitType == 6 ?  item.lwCooperationNum : item.zlCooperationNum }}
                                        </a-col>
                                    </a-row>
                                </div>
                            </template>
                        </a-card>
                    </a-col>
                    <a-col span="12">
                        <a-card class="cardcommon first" size="small">
                            <a-row>
                                <a-col span="2" class="dott_f">•</a-col>
                                <a-col span="18" class="centt">
                                    <span class="leftTit" style="color: rgba(0, 128, 128, 1);">成果数量 </span>
                                </a-col>
                            </a-row>
                            <a-row style="margin: 10px;">
                                <a-col span="18" class="leftTit" style="color: rgba(0, 128, 128, 1);">
                                    <a-radio-group name="radioGroup" v-model="secRadioValue" @change="onSecChange">
                                        <a-radio :value="1">
                                            论文
                                        </a-radio>
                                        <a-radio :value="2">
                                            专利
                                        </a-radio>
<!--                                        <a-radio :value="3">-->
<!--                                            领域-->
<!--                                        </a-radio>-->
                                    </a-radio-group>
                                    <a-select style="width: 200px" @change="changFruitNumFiled"
                                              v-if="secRadioValue == 3">
                                        <a-select-option v-for="item in fieldsArr" :value="item.name" allowClear>
                                            {{ item.name }}
                                        </a-select-option>
                                    </a-select>
                                </a-col>
                                <a-col span="6" class="leftTit" style="color: rgba(0, 128, 128, 1);">
                                    top:
                                    <a-select default-value="20" @change="changeSecPageSize" style="width: 60px;">
                                        <a-select-option value="20">
                                            20
                                        </a-select-option>
                                        <a-select-option value="50">
                                            50
                                        </a-select-option>
                                    </a-select>
                                </a-col>
                            </a-row>
                            <a-spin tip="数据加载中..." v-if="!showTopTwoLoading">
                                <div class="spin-content_fir">
                                </div>
                            </a-spin>
                            <template v-if="showTopTwoLoading">
                                <a-row class="colHead">
                                    <a-col span="4">
                                        序号
                                    </a-col>
                                    <a-col span="16">
                                        作者姓名
                                    </a-col>
                                    <a-col span="4">
                                        成果数量
                                    </a-col>
                                </a-row>
                                <div style="height: 520px; overflow: auto;">
                                    <a-row v-for="(item, index) in topSecData" :key="index" class="colCont">
                                        <a-col span="4">
                                            <div>{{ index + 1 }}</div>
                                        </a-col>
                                        <a-col span="16">
                                            {{ item.talentRealName }}
                                        </a-col>
                                        <a-col span="4">
                                            {{ searchSecTopObj.fruitType == 6 ?  item.lwFruitCount : item.zlFruitCount }}
                                        </a-col>
                                    </a-row>
                                </div>
                            </template>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
        </template>
        <template v-if="showTwo">
            <ttcp-talent-advanced-search ref="childTalentAdvancedSearch" @changeShow="showDiv"
                          @changeObj="changeObj"></ttcp-talent-advanced-search>
        </template>
        <fruit-info ref="fruitInfo"></fruit-info>

        <a-drawer placement="right" width="800"  @close="showChatModal = false" :visible="showChatModal" title="专家信息AI检索">
            <iframe :src="basePath + 'talent_chat/index.html'" style="height: 80vh; width: 100%; border: 0"></iframe>
        </a-drawer>
    </div>
</template>

<script>

import fruitInfo from '../../FruitInfo.vue'
import ttcpTalentAdvancedSearch from './TtcpTalentAdvancedSearch.vue'
import {postAction, getAction} from '@/api/esManage'
import Setting from "@/setting";


export default {
    name: 'TalentMain',
    components: {
        fruitInfo,
        ttcpTalentAdvancedSearch
    },
    data() {
        return {
            basePath: Setting.talentChatPath,
            cardHeight: 0,
            randomTags: [],
            loading: false,
            showFirst: true,
            showTwo: false,
            showThree: false,
            selectedType: 1,
            currentPage: 1,
            searchObj: {
                current: 1,
                pageNo: 1,
                pageSize: 12,
                sortField: "talentCooperationNum"
            },
            fruitData: {},
            isHaveFirstData: false,
            isHaveTwoData: false,
            isHaveThreeData: false,
            searchMainObj: {
                current: 1,
                pageNo: 1,
                pageSize: 12,
                searchType: 1,
                researchFieldNames:[],
                researchFieldKeywords:["能源", "电力"],
            },
            searchFirstObj: {
                current: 1,
                pageNo: 1,
                pageSize: 12,
                searchType: 1,
                researchFieldNames:[]
            },
            hotResultData: [],
            hyResultData: [],
            lwResultData: [],
            gotFruitIdList: [],
            showTop: false,
            firRadioValue: 1,
            secRadioValue: 1,
            fieldsArr: [{"name": "碳达峰碳中和研究", value: 1}, {
                "name": "新型电力系统研究",
                value: 2
            }, {"name": "能源电力战略规划研究", value: 3},
                {"name": "能源电力供需研究", value: 4}, {
                    "name": "能源电力体制改革与电力市场研究",
                    value: 5
                }, {"name": "能源电力数字经济研究", value: 6},
                {"name": "企业战略规划研究", value: 7}, {
                    "name": "企业经营与财务研究",
                    value: 8
                }, {"name": "企业运营管理研究", value: 9},
                {"name": "企业治理与风控合规研究", value: 10}, {
                    "name": "品牌文化与社会责任研究",
                    value: 11
                }, {"name": "数据、模型工具及实验室", value: 12}],
            searchFirTopObj: {
                fruitType: 6,
                pageNo: 1,
                pageSize: 20
            },
            searchSecTopObj: {
                fruitType: 6,
                pageNo: 1,
                pageSize: 20
            },
            showTopFirstLoading: false,
            showTopTwoLoading: false,
            topFirData: [],
            topSecData: [],
            showChatModal: false

        }
    },
    computed: {},
    created() {
        this.cardHeight = (document.documentElement.clientHeight || document.body.clientHeight);

        let parentMsgData = '';
        if(Setting.isMock){
            parentMsgData = {
                "researchDirection": "[" +
                    "{\"ftype\":\"主\",\"pro_direction_id\":\"35\",\"pro_direction\":\"能源电力数字化发展\",\"dtype\":\"主\",\"pro_field\":\"能源电力数字经济研究\",\"person_id\":\"1682\",\"pro_field_id\":\"6\"}," +
                    "{\"ftype\":\"主\",\"pro_direction_id\":\"36\",\"pro_direction\":\"企业数字化转型\",\"dtype\":\"主\",\"pro_field\":\"能源电力数字经济研究\",\"person_id\":\"1682\",\"pro_field_id\":\"6\"}," +
                    "{\"ftype\":\"辅\",\"pro_direction_id\":\"44\",\"pro_direction\":\"公司财务管理\",\"dtype\":\"辅\",\"pro_field\":\"企业经营与财务研究\",\"person_id\":\"1682\",\"pro_field_id\":\"8\"}]"
            };
        }else{
            parentMsgData = JSON.parse(window.localStorage.getItem('parentMsgData'));
        }
        console.log("----window.localStorage.getItem('parentMsgData')--isMockData---" + parentMsgData);
        if (parentMsgData && parentMsgData.researchDirection) {
            let researchFields = JSON.parse(parentMsgData.researchDirection);
            console.log("---parentMsgData.researchDirection---" + JSON.stringify(researchFields));
            // 使用 Set 去重 pro_field
            let uniqueProFields = [...new Set(researchFields.filter(item => item.dtype == "主").map(item => item.pro_field))];
            console.log("---去重后的主领域---uniqueProFields---" + JSON.stringify(uniqueProFields));
            window.localStorage.setItem("researchFields", JSON.stringify(uniqueProFields));

            this.searchMainObj.researchFieldNames = uniqueProFields;
            // let researchDirs = [];
            // let researchFies = [];
            // researchFields.forEach(direction => {
            //     // if(direction.ftype == '主'){
            //     researchDirs.push(direction.pro_direction);
            //     // }
            //     // if(direction.dtype == '辅'){
            //     researchFies.push(direction.pro_field);
            //     // }
            // });
            // let result = [];
            // if (researchFies.length > 5) {
            //     // 如果超过5个，只显示前5个主领域
            //     result = researchFies.slice(0, 5);
            // }
            // let mergedArray = [...researchDirs, ...researchFies];
            // if (researchFies.length + researchDirs.length > 5) {
            //     result = mergedArray.slice(0, 5);
            // } else {
            //     result = mergedArray;
            // }
            // window.localStorage.setItem("researchDirAndFields", JSON.stringify(result))

        }
        this.getData();
    },
    methods: {
        handleChange(value) {
            console.log(`selected ${value}`);
            this.selectedType = value;
        },
        getFruitTag() {
            // this.randomTags = JSON.parse(window.localStorage.getItem("researchDirAndFields"));
            let url = "/talents/getFruitTagByField";
            postAction(url, this.searchMainObj).then(res => {
                if (res.data.success) {
                    this.randomTags = res.data.result;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getData() {
            /*let url = "/fruit/getMostOfNumForFieldData";
            this.isHaveFirstData = false;
            this.isHaveTwoData = false;
            this.isHaveThreeData = false;
            postAction(url, this.searchMainObj).then(res => {
              if (res.data.success) {
                this.isHaveFirstData = true;
                this.isHaveTwoData = true;
                this.isHaveThreeData = true;

                this.hotResultData = res.data.result.hotResult;
                this.hyResultData = res.data.result.hyResult;
                this.lwResultData = res.data.result.lwResult;
                // res.data.result.hyResult.forEach(result => {
                //   let arr = result.resultModelList.map((item) => {return item.id});
                //   this.gotFruitIdList = [...this.gotFruitIdList, ...arr];
                // })
                // console.log("11" + this.gotFruitIdList)
                // res.data.result.lwResult.forEach(result => {
                //   let arr = result.resultModelList.map((item) => {return item.id});
                //   this.gotFruitIdList = [...this.gotFruitIdList, ...arr];
                // })
                // console.log(this.gotFruitIdList)
              }
            }).catch(err => {
              console.log(err)
            })*/
            this.getFruitTag();
            this.getHotResult();
            this.getFieldLinkFruit();
        },
        getHotResult() {
            let url = "/talents/getHotFruit";
            this.isHaveFirstData = false;
            postAction(url, this.searchMainObj).then(res => {
                if (res.data.success) {
                    this.isHaveFirstData = true;
                    this.hotResultData = res.data.result;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getFieldLinkFruit() {
            let url = "/talents/getFieldLinkFruit";
            this.isHaveTwoData = false;
            postAction(url, this.searchFirstObj).then(res => {
                if (res.data.success) {
                    this.isHaveTwoData = true;
                    this.hyResultData = res.data.result;
                }
            }).catch(err => {
                console.log(err)
            })

        },
        randomFruit(type) {
            if (type == 1) {
                this.searchMainObj.pageNo = this.searchMainObj.pageNo + 1;
                this.getHotResult();
            } else if (type == 2) {
                this.searchFirstObj.pageNo = this.searchFirstObj.pageNo + 1;
                this.getFieldLinkFruit();
            }
        },
        mainSearch(value){
            this.search(value, this.selectedType);
        },
        tagSearch(value) {
            this.search(value, 3);
        },
        search(value, type) {
            this.searchObj.content = value;
            if (!value) {
                this.$message.error('请输入内容!')
                return false;
            }
            this.loading = true;

            this.loading = false;
            this.searchObj.searchType = type;
            this.showDiv(false, true, false);
            this.$nextTick(() => {
                this.$refs.childTalentAdvancedSearch.toSearch(this.searchObj);
            })
        },
        showDiv(firstFlag, twoFlag, threeFlag) {
            this.showFirst = firstFlag;
            this.showTwo = twoFlag;
            this.showThree = threeFlag;
            // if(twoFlag){
            //   this.$nextTick(()=>{
            //     this.$refs.childTalentAdvancedSearch.toSearch(this.searchObj);
            //   })
            // }
        },
        changeObj(stype, scontent) {
            this.searchObj.searchType = stype;
            this.searchObj.content = scontent;
        },
        toTalentInfo(authorId, authorName) {
            this.$nextTick(() => {
                this.$refs.childTalentInfo.showInfo(authorId, authorName);
            })
        },
        showFruitInfo(item) {
            this.$nextTick(() => {
                this.$refs.fruitInfo.showModalInfo(item);
            })
        },
        toShowTop() {
            this.showTop = !this.showTop;
            if (this.showTop) {
                this.showTopFirstLoading = true;
                this.showTopTwoLoading = true;
                this.searchFirTopObj = {
                    fruitType: 6,
                    pageNo: 1,
                    pageSize: 20
                };
                this.searchSecTopObj = {
                    fruitType: 6,
                    pageNo: 1,
                    pageSize: 20
                };
                this.getTopFirData();
                this.getTopSecData();
            }
        },
        getTopFirData() {
            let url = "/talents/getCooperationNumRank";
            this.showTopFirstLoading = false;
            postAction(url, this.searchFirTopObj).then(res => {
                if (res.data.success) {
                    this.showTopFirstLoading = true;
                    this.topFirData = res.data.result.records;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        getTopSecData() {
            let url = "/talents/getFruitNumRank";
            this.showTopTwoLoading = false;
            postAction(url, this.searchSecTopObj).then(res => {
                if (res.data.success) {
                    this.showTopTwoLoading = true;
                    this.topSecData = res.data.result.records;
                }
            }).catch(err => {
                console.log(err)
            })

        },
        onFirChange(value) {
            this.searchFirTopObj.field = "";
            if (this.firRadioValue == 1) {
                this.searchFirTopObj.fruitType = 6;
                this.getTopFirData();
            } else if (this.firRadioValue == 2) {
                this.searchFirTopObj.fruitType = 11
                this.getTopFirData();
            }
        },
        onSecChange(value) {
            this.searchSecTopObj.field = "";
            if (this.secRadioValue == 1) {
                this.searchSecTopObj.fruitType = 6;
                this.getTopSecData();
            } else if (this.secRadioValue == 2) {
                this.searchSecTopObj.fruitType = 11;
                this.getTopSecData();
            }
        },
        changeCooNumFiled(value) {
            this.searchFirTopObj.field = value;
            this.getTopFirData();
        },
        changFruitNumFiled(value) {
            this.searchSecTopObj.field = value;
            this.getTopSecData();
        },
        changeFirPageSize(value) {
            this.searchFirTopObj.pageSize = value;
            this.getTopFirData();
        },
        changeSecPageSize(value) {
            this.searchSecTopObj.pageSize = value;
            this.getTopSecData();
        },
        toChat(){
            this.showChatModal = true;
        }
    }
}
</script>

<style>
::-webkit-scrollbar {
    height: 8px;
    width: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: rgb(121, 171, 177);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 128, 128, 1);
}

::-webkit-scrollbar-track {
    background-color: transparent;
    padding: 2px;
}
</style>

<style scoped>

/deep/ .searchIpt .ant-input-group .ant-input {
    height: 50px !important;
    line-height: 50px !important;
}

/deep/ .searchIpt .ant-input-group .ant-input-group-addon {
    border-radius: 50px 0 0 50px !important;
}

/deep/ .searchIpt .ant-input-group .ant-input {
    border-radius: 0 50px 50px 0 !important;
}

/deep/ .searchIpt .ant-input-group .ant-input-affix-wrapper {
    font-size: 20px;
}

/deep/ .searchIpt .ant-input-affix-wrapper .ant-input {
    border-radius: 50px;
    height: 50px !important;
    padding-left: 20px;
}

/deep/ .searchIpt .ant-input-search-icon {
    font-size: 25px;
}

.sit {
    line-height: 80px;
    color: rgba(3, 129, 129, 1);
    font-size: 40px;
    text-align: center;
}

.searchIpt {
    height: 130px;
    width: 800px;
    margin: auto;
}

.cardcommon {
    line-height: 20px;
    border-radius: 20px;
    font-size: 14px;
    text-align: center;
}

.first {
    background: linear-gradient(134.48deg, rgba(239, 250, 251, 1) 0.4%, rgba(182, 217, 206, 0.8) 100.41%);
    color: rgba(16, 16, 16, 1);
    border: 1px solid rgba(0, 128, 128, 1);
}

.two {
    background: linear-gradient(135deg, rgba(255, 207, 195, 0.27) 1.37%, rgba(251, 127, 93, 0.43) 100.45%);
    color: rgba(251, 127, 93, 1);
    border: 1px solid rgba(251, 127, 93, 1);
}

.three {
    background: linear-gradient(134.77deg, rgba(96, 129, 245, 0.13) -0.15%, rgba(96, 129, 245, 0.59) 99.95%);
    color: rgba(96, 129, 245, 1);
    border: 1px solid rgba(96, 129, 245, 1);
}

.dott_f {
    font-size: 75px;
    color: rgba(0, 128, 128, 1);
}

.dott_s {
    font-size: 75px;
    color: rgba(251, 127, 93, 1);
}

.dott_t {
    font-size: 75px;
    color: rgba(96, 129, 245, 1);
}

.leftTit {
    height: 35px;
    font-size: 24px;
    text-align: center;
    line-height: 35px;
    font-weight: bold;
}

.centt {
    text-align: left;
}

.centerTit {
    height: 20px;
    opacity: 0.3;
    color: rgba(16, 16, 16, 1);
    font-size: 15px;
    text-align: left;
    padding-left: 10px;
}

.rightTit {
    font-size: 18px;
    line-height: 35px;
    font-weight: bold;
    cursor: pointer;
    text-align: right;
}

.dottc {
    line-height: 35px;
    height: 35px;
    font-size: 15px;
    text-align: left;
    padding-left: 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autn {
    font-size: 18px;
    text-align: left;
    height: 35px;
    line-height: 35px;
}

.contc_firt {
    background-color: rgba(84, 211, 170, 0.38);
    border: 1px solid rgba(0, 128, 128, 1);
}

.contc_sec {
    background-color: rgba(255, 207, 195, 1);
    border: 1px solid rgba(251, 127, 93, 1);
}

.contc_thr {
    background-color: rgba(195, 207, 252, 1);
    border: 1px solid rgba(96, 129, 245, 1);
}

.cont_comm {
    line-height: 20px;
    border-radius: 10px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    margin: 10px;
}

.spin-content_fir {
    border: 1px solid #91d5ff;
    background-color: #e6f7ff;
    padding: 30px;
}

.spin-content_sec {
    border: 1px solid rgba(251, 127, 93, 1);
    background-color: rgba(251, 127, 93, 1);
    padding: 30px;
}

.spin-content_thr {
    border: 1px solid rgba(96, 129, 245, 1);
    background-color: rgba(96, 129, 245, 1);
    padding: 30px;
}

.colHead {
    font-size: 16px;
    padding: 5px;
    background-color: rgb(121, 171, 177);
    color: #fff;
}

.colCont {
    font-size: 16px;
    padding-top: 5px;
    height: 25px;
}

</style>